<template>
	<view class="auto-page" style="background-color: #FFFFFF;" v-if="predata && data">
		<view class="head p-lr-30 p-tb-15">
			<view class="line-40-26">创建时间：{{predata.create_time}}</view>
			<view class="line-40-26">商户名称：{{predata.merchant.mer_name}}</view>
			<view class="line-40-26">对账说明：{{predata.admin_mark || '无'}}</view>
		</view>
		<view class="middle f-row" style="border-bottom: 2rpx solid #e8e8e8;">
			<view class="order-time">下单时间</view>
			<view class="order-number single-text">订单编号</view>
			<view class="order-name">商品信息</view>
			<view class="real-pay">实际支付</view>
			<view class="order-reconciliated">是否对账</view>
		</view>
		<view class="f-column">
			<view class="item f-row" v-for="(item, index) in data" :key="index">
				<view class="order-time">{{item.pay_time}}</view>
				<view class="order-number single-text">{{item.order_sn}}</view>
				<view class="order-name single-text" style="overflow-x: scroll;"><text v-for="(good,gindex) in item.orderProduct">{{good.cart_info.product.store_name}}</text></view>
				<view class="real-pay">￥{{item.pay_price}}</view>
				<view class="order-reconciliated">{{(item.status == 0 || item.status == 1) ? '否' : '是'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	let _this;
	import FINANCE from '../../api/finance.js'
	export default {
		data() {
			return {
				data: false,
				id: false,
				predata:false,
			}
		},
		onLoad(options) {
			_this = this;
			let STORAGE_DATA = uni.getStorageSync('STORAGE_DATA');
			if(!STORAGE_DATA.id || !STORAGE_DATA.data) uni.navigateBack();
			_this.predata = STORAGE_DATA.data;
			_this.id = STORAGE_DATA.data.id;
			uni.removeStorageSync('STORAGE_DATA');
			_this.requestData();
		},
		methods: {
			requestData() {
				if(!_this.id) return;
				FINANCE.orderReconciliationDetail({ id : _this.id }).then((res) => {
					_this.data = res.list;
					console.log(res);
				}).catch((err) => {
					console.log(err);
				});
			}
		}
	}
</script>

<style>
.head {
	display: flex;
	flex-direction: column;
	position: relative;
	border-top: 2rpx solid #e8e8e8;
	border-bottom: 2rpx solid #e8e8e8;
}
.item {
	background-color: #FFFFFF;
	border-radius: 20rpx;
}
.line-40-26 {
	height: 40rpx;
	line-height: 40rpx;
	font-size: 26rpx;
}
.order-time{
	width: 200rpx;
}
.order-number {
	width: 200rpx;
	padding: 0 10rpx;
}
.order-time, .order-number, .order-name , .real-pay , .order-reconciliated {
	font-size: 20rpx;
	text-align: center;
	height: 50rpx;
	line-height: 50rpx;
}
.order-name , .real-pay {
	width: 100rpx;
}
.order-reconciliated {
	flex: 1;
}
</style>
